<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据代理机制</title>
    <!-- 按照 Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 

        1.什么是数据代理机制?
        通过访问代理对象的属性来间接访问目标对象的属性,而用户是不知道没有调用目标对象的
        数据代理机制的实现需要依靠 : Object.defineProperty()方法
        2.Esg新特性:
            在对象中函数 :function是可以省略的 直接写 get
                        get(){
                // 间接访问目标对象的属性
                return target.namelihua
            },

            set(val) {
                target.namelihua = val
        
            }
     -->

    <script>
        // 目标对象
        let target = {
            namelihua : '李华'
        }

        // 代理对象
        let proxy = {}

        // 如果要实现数据代理机制的话,就需要给 proxy 新增一个 name属性
        // 注意:代理对象新增的这个属性名字,和目标对象的属性名要保持一致才行

        Object.defineProperty(proxy,'namelihua',{
         /*    get : function(){
                // 间接访问目标对象的属性
                return target.namelihua
            },

            set :function(val) {
                target.namelihua = val
        
            } */

            get(){
                // 间接访问目标对象的属性
                console.log('getter方法执行了');
                return target.namelihua
            },

            set(val) {
                target.namelihua = val
        
            }
        })

        // 可以 动态修改
      /*   let target = {
            name : '张三'
        }
        const vm = new Vue ({
            el : '#app',
            data : {
                targe : '张三'
            }
        }) */
     
    </script>
    
</body>
</html>